<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>车服管理系统 - 登录</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .login-btn {
            width: 100%;
        }

        .el-card {
            border: 0px solid #EBEEF5;
            background-color: rgba(255, 255, 255, 0.6);
            color: #303133;
            -webkit-transition: .3s;
            transition: .3s;
        }

        .title {
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <main>
        <div class="form">
            <div class="form__cover"></div>
            <div class="form__loader">
                <div class="spinner active">
                    <svg class="spinner__circular" viewBox="25 25 50 50">
                        <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4"
                                stroke-miterlimit="10"></circle>
                    </svg>
                </div>
            </div>
            <div class="form__content">
                <el-card class="card form__content">
                    <h2 class="title">车服租赁系统运营管理后台</h2>
                    <el-form ref="loginForm" :model="loginForm" class="login-form" :rules="rules" label-position="right"
                             label-width="85px">
                        <el-form-item label="用户名：" prop="username">
                            <el-input v-model="loginForm.username" placeholder="请输入用户名">
                                <i slot="prefix" class="el-input__icon el-icon-user"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码">
                                <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
                            </el-input>
                        </el-form-item>
                        <!--                    <el-form-item label="角色：" prop="type">-->
                        <!--                        <el-select v-model="loginForm.type" clearable placeholder="请选择用户角色">-->
                        <!--                            <el-option label="系统管理员" :value="1"></el-option>-->
                        <!--                            <el-option label="物业管理员" :value="2"></el-option>-->
                        <!--                            <el-option label="业主" :value="3"></el-option>-->
                        <!--                        </el-select>-->
                        <!--                    </el-form-item>-->
                    </el-form>
                    <div class="btn-container">
                        <!--                    <el-button type="primary" class="login-btn" @click="login">登录</el-button>-->
                        <el-button type="button" class="styled-button" @click="login">
                        <span class="styled-button__real-text-holder">
                            <span class="styled-button__real-text">立即登录</span>
                            <span class="styled-button__moving-block face">
                                <span class="styled-button__text-holder">
                                    <span class="styled-button__text">立即登录</span>
                                </span>
                            </span>
                            <span class="styled-button__moving-block back">
                              <span class="styled-button__text-holder">
                                <span class="styled-button__text">立即登录</span>
                              </span>
                            </span>
                        </span>
                        </el-button>
                    </div>
                </el-card>
            </div>
        </div>
    </main>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择用户类型', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            login() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        axios.post("/user/login", this.loginForm).then(resp => {
                            let result = resp.data;
                            //登录成功
                            if (result.code) {
                                //跳转到首页
                                location.href = "/pages/main.html"
                            }
                            //登录失败
                            else {
                                this.$message.error(result.message);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    });
</script>
<script src="/js/index.js"></script>
</body>
</html>
